<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>书城-添加图书类型</title>
		<!--导入bootstrap的csswenjian -->
		<link rel="stylesheet" href="js/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootoast.css">
        <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
        <script src="js/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/bootoast.js"></script>

		<style>
			table th{
				text-align:center;
			}
			.pagination{
				margin: 5px;
			}
		</style>
        
		<script>
			$(function() {

                $('#bookType').empty();
                //加载所有的图书类型
                $.ajax({
                    url:'find_types',
                    type:'get',
                    cache:false,
                    data: {},
                    dataType:'json',
                    success:function (rst) {
                        $('#bookType').empty();
                        $(`<option value="-1">请选择类型</option>`).appendTo('#bookType');
                        if(rst.code==1){
                            for(let i=0;i<rst.data.length;i++){
                                var t = rst.data[i];
                                $(`<option value="${t.typeId}">${t.typeName}</option>`).appendTo('#bookType');
                            }
                        }
                    }
                });

                getBooks(1);

                //初始化删除模态框
                $("#delModal").on('show.bs.modal',function (event) {
                    var button = $(event.relatedTarget);
                    var bookId = button.data('book-id');
                    var modal = $(this);
                    modal.find('.modal-body #txtBookId').val(bookId);
                })

                //删除功能
                $('#btnDel').click(function () {
                    $.ajax({
                        url:'drop_book',
                        type:'post',
                        cache:false,
                        data: {bookId:$('#txtBookId').val()},
                        dataType:'json',
                        success:function (rst) {
                            if(rst.code==1){
                                bootoast({
                                    message:rst.msg,
                                    type:'success',
                                    position:'top',
                                    timeout:2
                                });
                                $('#delModal').modal('hide');
                                getBooks(1);
                            }else{
                                bootoast({
                                    message:rst.msg,
                                    type:'danger',
                                    position:'top',
                                    timeout:2
                                });
                            }
                        }
                    });

                })

                //初始化修改模态框
                $('#editModal').on('show.bs.modal',function (event) {
                    var button = $(event.relatedTarget);
                    var bookId = button.data('book-id');
                    var bookName = button.data('book-name');
                    var bookType = button.data('book-type');
                    var author = button.data('author');
                    var publish = button.data('publish');
                    var price = button.data('price');
                    var storages = button.data('storages');
                    var depict = button.data('depict');
                    var modal = $(this);
                    modal.find('.modal-body #bookId').val(bookId);
                    modal.find('.modal-body #bookName').val(bookName);
                    modal.find('.modal-body #bookType').val(bookType);
                    modal.find('.modal-body #author').val(author);
                    modal.find('.modal-body #publish').val(publish);
                    modal.find('.modal-body #price').val(price);
                    modal.find('.modal-body #storages').val(storages);
                    modal.find('.modal-body #desc').val(depict);

                });

				$('#btnModify').click(function() {
					//验证
					if (!valiInput()) {
                        $.ajax({
                            url:'edit_book',
                            type:'post',
                            cache:false,
                            data: $('#form1').serialize(),
                            dataType:'json',
                            success:function (rst) {
                                if(rst.code==1){
                                    bootoast({
                                        message:rst.msg,
                                        type:'success',
                                        position:'top',
                                        timeout:2
                                    });
                                    $('#editModal').modal('hide');
                                    getBooks(1);
                                }else{
                                    bootoast({
                                        message:rst.msg,
                                        type:'danger',
                                        position:'top',
                                        timeout:2
                                    });
                                }
                            }
                        });
					}
				});
			});
			
			function getBooks(pn) {
                $.ajax({
                    url:'get_books_page',
                    type:'post',
                    cache:false,
                    data: {pageNow: pn},
                    dataType:'json',
                    success:function (rst) {
                        $('table tbody').empty();
                        $('.pagination').empty();
                        if(rst.code == 1){
                            if(rst.data.books!=null && rst.data.books.length>0){
                                for(let i=0;i<rst.data.books.length;i++){
                                    var book = rst.data.books[i];
                                          $(`<tr>
                                                <td class="text-center">${book.bookId}</td>
                                                <td>${book.bookName}</td>
                                                <td>${book.typeName==null?'':book.typeName}</td>
                                                <td>${book.author}</td>
                                                <td>${book.publish}</td>
                                                <td class="text-left">${book.price}</td>
                                                <td class="text-left">${book.storages}</td>
                                                <td class="text-center">
                                                    <input type="button" data-toggle="modal" data-book-id="${book.bookId}"
                                                    data-book-name="${book.bookName}" data-book-type="${book.typeId}" data-author="${book.author}"
                                                    data-publish="${book.publish}" data-price="${book.price}" data-storages="${book.storages}"
                                                    data-depict="${book.depict}"
                                                     data-target="#editModal" value="编辑" class="btn btn-info btn-xs">
                                                    <input type="button" data-toggle="modal" data-book-id="${book.bookId}" data-target="#delModal" value="删除" class="btn btn-danger btn-xs">
                                                </td>
                                            </tr>`).appendTo('table tbody');
                                }
                                //处理分页
                                $(`<li><a href="javascript:getBooks(${rst.data.page.pageNow-1})">&laquo;</a></li>`).appendTo('.pagination');
                                for(let i = 1;i <= rst.data.page.pageCount;i++){
                                    if(i==rst.data.page.pageNow) {
                                        $(`<li class="active"><a href="#">${i}</a></li>`).appendTo('.pagination');
                                    }else {
                                        $(`<li><a href="javascript:getBooks(${i})">${i}</a></li>`).appendTo('.pagination');
                                    }
                                }
                                $(`<li><a href="javascript:getBooks(${rst.data.page.pageNow+1})">&raquo;</a></li>`).appendTo('.pagination');
                            }else {
                                $(`<tr>
                                        <td colspan="8" class="text-center text-danger">未查寻到图书</td>
                                   </tr>`).appendTo('table tbody');
                            }
                        }
                    }
                });
            }

			//验证如果没有验证通过返回false  
			function valiInput() {
				var bookname = $('#bookname').val();
				var booktype = $('#booktype').val();
				var author = $('#author').val();
				var publish = $('#publish').val();
				var price = $('#price').val();
				var storages = $('#storages').val();
				if (bookname == '') {
					bootoast({
						message: '图书名不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
				if (booktype == '') {
					bootoast({
						message: '图书类型不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
		
				if (author == '') {
					bootoast({
						message: '图书必须有作者',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
				if (publish == '') {
					bootoast({
						message: '出版社不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
				if (price == '') {
					bootoast({
						message: '价格不能为空',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
				if (parseInt(price) <= 0) {
					bootoast({
						message: '价格不能小于0',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
				if (storages == '' || parseFloat(storages) < 0) {
					bootoast({
						message: '库存不合法',
						type: 'danger',
						position: 'top',
						timeout: 2
					});
					return false;
				}
		
		
			}

		</script>
	</head>
	<body>

		<ul class="breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">图书类型管理</a></li>
            <li>维护图书</li>
        </ul>

        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <table class="table table-bordered">
                        <thead>
                            <tr class="bg-primary">
                                <th style="width: 10%;">编号</th>
                                <th>图书名称</th>
                                <th style="width: 10%;">图书类型</th>
                                <th style="width: 18%;">作者</th>
                                <th style="width: 15%;">出版社</th>
                                <th style="width: 10%;">价格</th>
                                <th style="width: 10%;">库存量</th>
                                <th style="width: 10%;">操作</th>
                            </tr>
                        </thead>

                        <tbody class="table-hover text-center">
                            <tr>
                                <td class="text-center">1</td>
                                <td>你要看吗</td>
                                <td>文学类</td>
                                <td>蔡伟</td>
                                <td>xx出版社</td>
                                <td class="text-left">100.00</td>
                                <td class="text-left">100</td>
                                <td class="text-center">
                                    <input type="button" data-toggle="modal" data-target="#editModal" value="编辑" class="btn btn-info btn-xs">
                                    <input type="button" data-toggle="modal" data-target="#delModal" value="删除" class="btn btn-danger btn-xs">
                                </td>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 text-center">
                    <ul class="pagination">
                        <li><a href="#">&laquo;</a></li>
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!--修改模态框-->
        <div class="modal fade" id="editModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" style="border-left: 5px royalblue solid;">修改图书</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="form1">
							<div class="form-group">
								<label for="bookId" class="col-sm-2 control-label">图书编号</label>
								<div class="col-sm-10">
									<input type="text" name="bookId" id="bookId" readonly class="form-control">
								</div>
                            </div>

                            <div class="form-group">
								<label for="bookName" class="col-sm-2 control-label">图书名称</label>
								<div class="col-sm-4">
                                    <input type="text" name="bookName" id="bookName" class="form-control">
								</div>

								<label for="bookType" class="col-sm-2 control-label">图书类型</label>
								<div class="col-sm-4">
                                    <select name="typeId" id="bookType" class="form-control">
                                        <option value="-1">请选择类型</option>
                                    </select>
								</div>
                            </div>

                            <div class="form-group">
								<label for="author" class="col-sm-2 control-label">作者</label>
								<div class="col-sm-4">
									<input type="text" name="author" id="author" class="form-control">
								</div>

								<label for="publish" class="col-sm-2 control-label">出版社</label>
								<div class="col-sm-4">
									<input type="text" name="publish" id="publish" class="form-control">
								</div>
                            </div>

                            <div class="form-group">
                                <label for="price" class="col-sm-2 control-label">价格</label>
                                <div class="col-sm-4">
                                    <input type="number" name="price" id="price" class="form-control">
                                </div>

                                <label for="storages" class="col-sm-2 control-label">库存量</label>
                                <div class="col-sm-4">
                                    <input type="number" name="storages" id="storages" class="form-control">
                                </div>
                            </div>

							<div class="form-group">
								<label for="desc" class="col-sm-2 control-label">图书描述</label>
								<div class="col-sm-10">
									<textarea name="depict" id="desc" row="4" class="form-control"></textarea>
								</div>
							</div>

						</form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-warning btn-sm" id="btnModify">修改</button>
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

		<!--删除模态框-->
		<div class="modal fade" id="delModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" style="border-left: 5px royalblue solid;">温馨提示</h4>
                    </div>
                    <div class="modal-body">
                        确定删除数据吗?
                        <input type="hidden" name="" id="txtBookId">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger btn-sm" id="btnDel">确定</button>
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>

    </body>
    </html>